<div id="paperEdit">
    <h2>编辑问卷</h2>

    <div class="content">
        <el-card class="cleft">
            <el-tree node-key="id" ref="tree" show-checkbox default-expand-all :data="outline" :props="defaultProps" @check-change="selectNode"
                @node-click=""></el-tree>
        </el-card>
        <div class="cright">
            <el-card style="margin:5px;" v-for="(item,index) in page.content" :key="'page_'+index" :header="item.text">
                <el-radio-group>
                    <!-- v-model="radio2" -->
                    <el-radio v-for="(i,index) in page.item" :key="'item_'+index" :label="i.id">{{i.text}}</el-radio>
                </el-radio-group>

            </el-card>
        </div>
    </div>
    <div slot="footer">
        <el-button @click="fanhui">取 消</el-button>
        <el-button type="primary" @click="saveQuesaga" onclick="indexVm.loadPage('/nav/papers.html')">确 定</el-button>
    </div>
    <!-- {{page}} -->

</div>
<script>
    new Vue({
        el: '#paperEdit',
        data: function () {
            return {
                papersData: [],

                // 需要提交的数据
                page: {
                    title: "",
                    content: [],
                    // 可以在后台将content与item保存在一起 
                    // 需将这里的数据写入数据库，然后读出来， 大户句酷里的表必须做增删改查，必须列一个分组，父级对应多个子级
                    item: [
                        { id: 1, text: '优秀', val: 5 },
                        { id: 2, text: '良好', val: 4 },
                        { id: 3, text: '中等', val: 3 },
                        { id: 4, text: '很差', val: 2 },
                    ]
                },
                outline: [],
                defaultProps: {
                    children: "children",
                    label: 'text'
                },
            }
        },
        methods: {
            // 返回
            fanhui:function(){
                var _this = this
                console.log(1)
            },
            // 确认创建问卷，跳出弹框输入标题，然后提交问卷入后台
            saveQuesaga: function (data) {
                var _this = this
                this.$prompt('请输入问卷标题', '提示', {
                    confirmButtonText: '确定',
                    cancelmButtonText: '取消',
                    inputPattern: /^.+$/,
                    inputErrorMessage: '标题不能为空',
                    inputValue: _this.papersData.title,
                    callback: function (action, obj) {
                        if (action == 'confirm') {
                            $.post('/papers/edit', {
                                id: _this.papersData.id,
                                title: obj.inputValue,
                                content: JSON.stringify(_this.page.content),
                                item: JSON.stringify(_this.page.item),
                            }, function (result) {
                                console.log(result)
                                // 页面自动刷新
                                // location.reload()
                                _this.$message({
                                    type: 'success',
                                    message: '问卷编辑成功'
                                })
                            })
                        } else {
                            _this.$message({
                                type: 'info',
                                message: '问卷编辑失败'
                            });

                        }
                    }
                });
            },
            // 选择选入问卷中的大纲标题    参数
            selectNode: function (data, isSelect) {
                if (data.children.length == 0) {
                    console.log(data)
                    if (isSelect) {
                        this.page.content.push(data)
                    } else {
                        var index = this.page.content.indexOf(data)
                        this.page.content.splice(index, 1)
                    }
                }
            }
        },
        created: function () {
            var _this = this
            // 读取大纲，放入添加问卷弹出框界面
            $.get('/outline', function (result) {
                if (result.error == 0) {
                    _this.outline = result.data
                }
            })
            // 用于筛选有条件的id 用于编辑
            $.get('/papers/find', { id: Cookies.get('paper_id') }, function (result) {
                if (result.error != 0) return;
                console.log(result)
                _this.$refs.tree.setCheckedNodes(JSON.parse(result.data.content));
                _this.papersData = result.data
            })
        },
    })
</script>
<style>
    .addwj {
        width: 100px;
    }

    .content {
        overflow: hidden;
    }

    .content .cleft {
        float: left;
        border: 1px solid rgba(0, 0, 0, 0.1);
        box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
    }

    .content .cright {
        float: left;
        border: 1px solid rgba(0, 0, 0, 0.1);
        box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
    }
</style>